import './App.css';
import { Layout,Menu, Input} from 'antd';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import React, { useState } from 'react';



function App() {
  const [menuTwo,setMenuTwo] = useState('菜单2-2')
  const [menuTwoValue,setMenuTwoValue] = useState('')
  const { Header, Sider, Content } = Layout;
  const [openKeys, setOpenKeys] = useState(['sub2']);


function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
}

const items = [
  getItem('菜单一', 'sub1', <MailOutlined />, [
    getItem('菜单1-1', '1'),
    getItem('菜单1-2', '2'),
  ]),
  getItem('菜单二', 'sub2', <AppstoreOutlined />, [
    getItem('菜单2-1', '3'),
    getItem(menuTwo, '4'),
  ]),
];

const rootSubmenuKeys = ['sub1', 'sub2'];


  const onOpenChange = (keys) => {
    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);

    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      setOpenKeys(keys);
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
  };

  return (
    <div className="App">
        <Layout>
          <Header>
            <img style={{ width:'50px' }} src='https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' />
              &emsp;
            <span style={{ color:'#fff',fontWeight:'bolder' }}>react</span>
          </Header>
          <Layout>
            <Sider>
            <Menu
              mode="inline"
              theme='dark'
              openKeys={openKeys}
              onOpenChange={onOpenChange}
              style={{
                width: '100%',
              }}
              items={items}
              />
            </Sider>
            <Content>
                <br />
                &emsp;
                <Input placeholder="子菜单2-2编辑后" value={menuTwoValue} onChange={(e)=>{ setMenuTwoValue(e.target.value) }} style={{ width:'200px' }} />
                &emsp;
                <button onClick={()=>{
                  setMenuTwo(menuTwoValue)
                }}>保存</button>
            </Content>
          </Layout>
        </Layout>
    </div>
  );
}

export default App;
